<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Complex flexbox example</title>
    <style>
      body {
        margin: 0;
      }
      header {
        background: purple;
        height: 100px;
      }
      h1 {
        text-align: center;
        color: white;
        line-height: 100px;
        margin: 0;
      }
      article {
        padding: 10px;
        margin: 10px;
        background: aqua;
      }
      /* Add your flexbox CSS below here */
      article {
        /* flex : 控制 flex 项占用空间的比例的 */
        flex: 1 200px;
      }
      article:nth-of-type(3) {
        /* 设置第三个 <article> 元素的子节点的布局同样为 flex，但是属性值为列布局 */
        flex: 3 200px;
        display: flex;
        flex-flow: column;
      }
      article:nth-of-type(3) div:first-child {
        /* 选择第一个div，首先使用 flex: 1 100px; 简单的给它一个最小的高度 100px，溢出则换行 */
        flex: 1 100px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-around;
      }
      section {
        display: flex;
      }
      button {
        /*  给按钮设置大小，并设置值为 1 auto 的 flex 属性，此时调整浏览器窗口宽度将会根据宽度进行自适应 */
        flex: 1 auto;
        margin: 5px;
        font-size: 18px;
        line-height: 1.5;
      }
      
    </style>
  </head>
  <body>
    <header>
      <h1>Complex flexbox example</h1>
    </header>

    <section>
      <article>
        <h2>First article</h2>
        <p>本页记录了博主（WeiyiGeek）个人在初识计算机技术到从业过程中学习的路径，包括在此学习、工作过程中学习的计算机基础知识、网络工程师、开发程序员、运维工程师以及物联网硬件等相关学习资料（书籍、视频）和总结的笔记，并按学习类别分别进行整理归纳，方便后续回顾学习以及帮助后来学习的朋友做一个学习参考，希望能对各位读者朋友们的学习有帮助, 有成长。
          </p>
      </article>

      <article>
        <h2>Second article</h2>
        <p>本节中推荐了博主所看的一些书籍，在电子化资料横行的今天，我觉得学习还是离不开纸质书籍，它可以帮助您加深知识的理解，让你事半功倍;当下，我的学习方法通常是先参考官方文档中的入门实践、然后在看看与其相关的视频实践，最后找寻相关书籍（纸质或者电子化）进行加深学习，实践并总结经验笔记。</p>
      </article>

      <article>
        <!-- 设置第一个div为列布局 -->
        <div>
          <button>前端</button>
          <button>后端</button>
          <button>运维</button>
          <button>网安</button>
          <button>DBA</button>
        </div>
        <div>
          <p>欢迎关注【WeiyiGeek】作者，我将持续整理不断更新中, 希望各位看友多多支持!，邀请各位看友加入学习交流群【 https://weiyigeek.top/visit.html 】相互监督学习答疑。
            </p>
        </div>
        <div>
          <p>欢迎各位朋友关注我的微信公众号【WeiyiGeek】以及微信小程序【极客全栈修炼】，以及学习交流群( https://weiyigeek.top/visit.html )。 </p>
        </div>
      </article>
    </section>
  </body>
</html>
